readme.spec.tsx ➔ FormButtons - Code Metrics - Inspection of "Add basic usage example in readme and spec" - askirmas/react-classnaming - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — main ( ca0e04...952648 )

by Andrii

created 2021-03-08 11:51 UTC

readme.spec.tsx ➔ FormButtons A

↳ Parent: __tests__/readme.spec.tsx

Complexity

Conditions

Size

Total Lines	17
Code Lines	15

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	15
dl	0
loc	17
rs	9.65
c	0
b	0
f	0
cc	1

import React from "react"
import expectRender from "../expect-to-same-render"
import classNaming from "../src"

it("Basic usage", () => {
  type Props = {
    isValid: boolean
    readOnly: boolean
  }

  // isValid = false, readOnly = false
  function FormButtons({isValid, readOnly}: Props) {
    const cssClasses = classNaming()
    const buttonClass = cssClasses({"button": true}) // "button"
    
    return <>
      <button {
        ...buttonClass // className="button" 
      }>Close</button>
      <button type="reset" {
        ...buttonClass({"button--disabled": readOnly}) // className="button"
      }>Reset</button> 
      <button type="submit" className={`button_submit ${
        buttonClass({"button--disabled": readOnly || !isValid}) // "button button--disabled"
      }`}>Submit</button> 
    </>
  }  

  expectRender(
    <FormButtons isValid={false} readOnly={false} />
  ).toSame(<>
    <button className="button">Close</button>
    <button type="reset" className="button">Reset</button>
    <button type="submit" className="button_submit button button--disabled">Submit</button>
  </>)
})


1			import React from "react"
2			import expectRender from "../expect-to-same-render"
3			import classNaming from "../src"
4
5			it("Basic usage", () => {
6			type Props = {
7			isValid: boolean
8			readOnly: boolean
9			}
10
11			// isValid = false, readOnly = false
12			function FormButtons({isValid, readOnly}: Props) {
13			const cssClasses = classNaming()
14			const buttonClass = cssClasses({"button": true}) // "button"
15
16			return <>
17			<button {
18			...buttonClass // className="button"
19			}>Close</button>
20			<button type="reset" {
21			...buttonClass({"button--disabled": readOnly}) // className="button"
22			}>Reset</button>
23			<button type="submit" className={`button_submit ${
24			buttonClass({"button--disabled": readOnly \|\| !isValid}) // "button button--disabled"
25			}`}>Submit</button>
26			</>
27			}
28
29			expectRender(
30			<FormButtons isValid={false} readOnly={false} />
31			).toSame(<>
32			<button className="button">Close</button>
33			<button type="reset" className="button">Reset</button>
34			<button type="submit" className="button_submit button button--disabled">Submit</button>
35			</>)
36			})
37

askirmas / react-classnaming

Push — main ( ca0e04...952648 )

readme.spec.tsx ➔ FormButtons A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like